<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>店铺设置</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="./css/set_share.css">
		<style type="text/css">
			.layui-form-label {
				width: 100px;
			}
			
			.layui-upload-list {
				margin-left: 20px;
				margin-top: 10px;
			}
			
			#demoText {
				margin-top: 5px;
			}
			
			#demoText2 {
				margin-top: 5px;
			}
			
			#uniocn {
				box-sizing: border-box;
				padding: 15px 100px;
			}
		</style>
	</head>

	<body>
		<div id="uniocn" class="layui-layout layui-layout-admin">
			<div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
				<button class="layui-btn layui-btn-ms">店铺设置</button>
			</div>

			<div class="finance-modular">
				<form action="##" class="layui-form">
					<p style="box-sizing: border-box;padding: 10px;background: #F8F8F8;">店铺设置</p>
					<div style="box-sizing: border-box;padding: 10px ;background: #fff">
						<div class="layui-form-item">
							<label class="layui-form-label" style="width: 100px;">店铺名称</label>
							<div class="layui-input-inline" style="width: 400px;">
								<input name="title" type="text" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">店铺图标</label>
							<div class="layui-input-block">
								<div class="layui-upload">
									<button type="button" class="layui-btn" id="test1">上传图片</button>
									<div class="layui-upload-list">
										<img class="layui-upload-img" style="width: 120px;" id="demo1">
										<p id="demoText"></p>
									</div>
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">营业时间</label>
							<div class="layui-input-inline" style="width: 400px;">
								<input type="text" class="layui-input" id="time1">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label" style="width: 100px;">店铺地址</label>
							<div class="layui-input-inline" style="width: 400px;">
								<input name="address" type="text" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label" style="width: 100px;">店铺人气</label>
							<div class="layui-input-inline" style="width: 400px;">
								<input name="Popularity" type="text" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

					</div>
					<button class="layui-btn" lay-submit="submit" lay-filter="formDemo" style="margin: 10px 10px 0px 0px">提交</button>
				</form>
			</div>

		</div>

		<script src="layui/layui.js"></script>
		<script src="./js/jquery-3.2.1.min.js"></script>
		<script>

			layui.use(['form', 'upload', 'laydate'], function() {
				var form = layui.form,
					upload = layui.upload,
					laydate = layui.laydate;
				//店铺图片上传
				var uploadInst = upload.render({
					elem: '#test1',
					url: '',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo1').attr('src', result); //图片链接（base64）
						});
					},

					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},

					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}

				})

				laydate.render({
					elem: '#time1',
					type: 'datetime',
					range: true
				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(JSON.stringify(data.field));
					return false;
				});

			});
		</script>
	</body>

</html>